<template>
  <div>
    <div class="box">
      <!-- 表单卡片 -->
      <el-card class="box-card">
        <!-- 表头 -->
        <div class="clearfix">
          <div class="top">
            <div class="left">说明 :目前支持学科和关键字条件筛选</div>
            <el-button
              class="right"
              type="success"
              style="float: right; padding: 3px 0"
              @click="$router.push('/questions/new')"
              ><i class="el-icon-edit"></i> 新增用户</el-button
            >
          </div>
        </div>
        <!-- 头部搜索-->
        <div class="layout">
          <el-row type="flex" justify="end">
            <el-col class="el-col" :span="6"
              ><div>
                <span class="text">学科</span>
                <el-select v-model="value" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>
            <el-col :span="6"
              ><div>
                <span class="text">二级目录 </span>
                <el-select v-model="value" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>
            <el-col :span="6"
              ><div>
                <span class="text">标签</span>
                <el-select v-model="value" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>
            <el-col :span="6"
              ><div>
                <span class="text">关键字 </span
                ><el-input
                  v-model="input"
                  class="el-input"
                  size="small"
                  placeholder="请输入内容"
                ></el-input></div
            ></el-col>
          </el-row>

          <el-row type="flex" justify="end">
            <el-col :span="6"
              ><div>
                <span class="text">试题类型</span>
                <el-select size="small" v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>

            <el-col :span="6"
              ><div>
                <span class="text">难度 </span>
                <el-select size="small" v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>

            <el-col :span="6"
              ><div>
                <span class="text">方向</span>
                <el-select v-model="value" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>

            <el-col :span="6"
              ><div>
                <span class="text">录入人</span>
                <el-select size="small" v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>
          </el-row>

          <el-row type="flex" justify="end">
            <el-col :span="6"
              ><div>
                <span class="text">题目备注</span
                ><el-input
                  class="el-input"
                  size="small"
                  v-model="input"
                  placeholder="请输入内容"
                ></el-input></div
            ></el-col>
            <el-col :span="6"
              ><div>
                <span class="text">企业简称</span
                ><el-input
                  class="el-input"
                  size="small"
                  v-model="input"
                  placeholder="请输入内容"
                ></el-input></div
            ></el-col>
            <el-col :span="6"
              ><div>
                <span class="text">城市</span>
                <el-select
                  v-model="value"
                  size="small"
                  class="citybox"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-select
                  size="small"
                  v-model="value"
                  class="citybox"
                  placeholder="请选择" >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select></div
            ></el-col>
            <el-col :span="6"><div>
                <el-button size="small" >清除</el-button>
                <el-button size="small" type="primary">搜索</el-button>
              </div></el-col>
          </el-row>
        </div>

        <!-- 表单 -->
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first">
       <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <div class="text">
                <i class="el-icon-info"></i>
                <span class="tt">共{{ total }}条记录</span>
              </div>
            </div></el-col
          >
        </el-row>
       <el-table :data="list" style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="catalog"
            label="目录 "
            width="140"
          ></el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="question"
            label="题干 "
            width="240"
          ></el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="120">
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="100">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="100">
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="100">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="100">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="100">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="240">
            <template #default="scope">
              <div class="do">
                <p>
                  <span>预览</span>
                  <span >审核</span>
                  <span >修改</span>
                  <span >上架</span>
                  <span >删除</span>
                </p>
              </div>
            </template>
          </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="待审核" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="已审核" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="已拒绝" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryObj.page"
          :page-sizes="[10, 20, 50, 400]"
          :page-size="queryObj.pagesize"
          layout="sizes, prev, pager, next,total,jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
      <!-- 弹窗 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%">
        <el-row>
          <el-col :span="6"
            ><span>【题型 】</span> : <span>多选题</span></el-col>
          <el-col :span="6"
            ><span>【编号 】</span> : <span>多选题 </span></el-col
          >
          <el-col :span="6"
            ><span>【难度 】</span> : <span>多选题 </span></el-col
          >
          <el-col :span="6"
            ><span>【标签 】</span> : <span>多选题 </span></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6"
            ><span>【学科 】</span> : <span>多选题 </span></el-col
          >
          <el-col :span="6"
            ><span>【目录】</span> : <span>多选题 </span></el-col
          >
          <el-col :span="6"
            ><span>【方向 】</span> : <span>多选题 </span></el-col
          >
          <el-col :span="6"></el-col>
        </el-row>
        <hr />
        <p>【题干】：</p>
        <p>问问她热议腾瑞雨</p>
        <p>多选题 选项：（以下选中的选项为正确答案）</p>
        <p><el-checkbox v-model="checked" /></p>
        <p><el-checkbox v-model="checked" /></p>
        <p><el-checkbox v-model="checked" /></p>
        <p><el-checkbox v-model="checked" /></p>
        <hr />
        <p>
          【参考答案】：<el-button
            type="danger"

            size="small"
            >视频答案预览</el-button
          >
        </p>
        <!-- <video  v-if="showvideo" class="video" src="@/assets/2.mp4" controls  ></video> -->
        <hr />
        <p><span>【答案解析】</span>:<span>wergtg</span></p>
        <hr />
        <p><span>【题目备注】</span>:<span>额问题rest热用途</span></p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary"
            >关闭</el-button
          >
        </span>
      </el-dialog>
      <!-- 添加精选 -->
      <el-dialog title="提示" :visible.sync="showTip" width="30%" center>
        <span>确定将本题添加至精选题库吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 删除弹窗 -->
      <el-dialog title="提示" :visible.sync="sureDele" width="30%" center>
        <span>此操作将永久删除该题目, 是否继续?</span>
        <span slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  choice,
  questionDetail,
  choicePublish,
  removeQuestion
} from '@/api/hmmm/questions.js'

export default {
  data () {
    return {
      activeName: 'first',
      checked: '',
      input: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      list: [],
      total: 0,
      dialogVisible: false,
      formLabelWidth: '120px',
      empty: [],
      statu: [
        {
          value: '选项1',
          label: '启用'
        },
        {
          value: '选项2',
          label: '禁用'
        }
      ],
      showvideo: false,
      id: '',
      queryObj: {
        page: 1,
        pagesize: 10
      },
      detailList: null,
      cadrType: 'add',
      showTip: false,
      sureDele: false
    }
  },

  async created () {
    this.getchoice()
  },

  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 渲染页面
    async getchoice () {
      const { data } = await choice(this.queryObj)
      this.list = data.items
      console.log(data)
      this.total = data.counts
    },
    // 修改表单当前页
    handleCurrentChange (val) {
      this.queryObj.page = val
      this.getchoice()
    },
    // 修改每页多少条的时候跳转回第一页
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      this.getchoice()
      this.queryObj.page = 1
    }
  }
}
</script>

<style scoped lang="less">
.video {
  width: 400px;
  height: 300px;
}
.top {
  .left {
    float: left;
    font-size: 12px;
    color: #e597a8;
  }
}

.clear {
  margin-left: 40px;
}

.do {
  height: 40px;
  display: flex;
  justify-content: flex-start;
  span {
    margin-left: 15px;
    font-size: 12px;
    color: rgb(62, 165, 229);
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 35px;
  line-height: 35px;

  color: #92969a;
  padding-right: 15px;
  margin-top: 15px;
}
.text {
  margin-right: 15px;
  font-weight: bolder;
  color: #646565;
}
.bg-purple-dark {
  background: #f1f4f6;
}
.clearfix {
  margin-bottom: 15px;
  .input {
    width: 200px;
    margin-right: 10px;
  }
}
.box {
  padding: 10px;
}
.text {
  font-size: 14px;
}

.right {
  width: 100px;
  height: 30px;
  font-size: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.el-input {
  width: 220px;
  height: 20px;
}
.el-col {
  margin-bottom: 15px;
}
.citybox {
  width: 35%;
}
</style>
